<template>
    <div>
        <el-breadcrumb separator="/" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/admin/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="seach">
            <el-input placeholder="请输入内容" v-model="keyword" class="input-with-select kw">
                <el-button slot="append" icon="el-icon-search" @click="searchHandler"></el-button>
            </el-input>
            <div class="btns">
                <el-button type="primary" icon="el-icon-plus" @click="addUser">新增</el-button>
            </div>
        </div>
        <div class="user-list">
            <!--[{ attribute }]-->
            <el-table
                    :border="true"
                    :stripe="true"
                    :data="userList"
                    style="width: 100%; margin-bottom: 10px">

                <el-table-column
                        prop="id"
                        label="序号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名">
                </el-table-column>
                <el-table-column
                        prop="mobile"
                        label="手机号">
                </el-table-column>

                <el-table-column
                        prop="email"
                        label="邮箱"
                       >
                </el-table-column>

                <el-table-column
                        prop="role_name"
                        label="角色名称"
                        width="180">
                </el-table-column>

                <el-table-column  width="180" label="操作">
                    <!--插槽传递的数据，记录信息-->
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope)">删除
                        </el-button>
                    </template>
                </el-table-column>


            </el-table>

            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[1, 2, 3, 10]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

            <el-dialog title="增加用户" :visible.sync="addFormModal">

                <el-form :model="addForm">
                    <el-form-item label="用户名" label-width="80">
                        <el-input v-model="addForm.username" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="密码" label-width="80">
                        <el-input type="password" v-model="addForm.password" autocomplete="off"></el-input>
                    </el-form-item>


                    <el-form-item label="邮箱" label-width="80">
                        <el-input v-model="addForm.email" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="手机号" label-width="80">
                        <el-input v-model="addForm.mobile" autocomplete="off"></el-input>
                    </el-form-item>


                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="addFormModal = false">取 消</el-button>
                    <el-button type="primary" @click="storeUser">确 定</el-button>
                </div>

            </el-dialog>


            <el-dialog title="修改用户" :visible.sync="updateFormModal">

                <el-form :model="updateForm">

                    <el-form-item label="邮箱" label-width="80">
                        <el-input v-model="updateForm.email" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="手机号" label-width="80">
                        <el-input v-model="updateForm.mobile" autocomplete="off"></el-input>
                    </el-form-item>


                </el-form>


                <div slot="footer" class="dialog-footer">
                    <el-button @click="updateFormModal = false">取 消</el-button>
                    <el-button type="primary" @click="updateUserHandler">确 定</el-button>
                </div>


            </el-dialog>


        </div>
    </div>
</template>

<script>
    import {getUserList, delUserById, addUser, updateUser} from "@/api/admin";

    export default {
        name: "list",
        data() {
            return {
                keyword: '',
                currentPage: 1,
                size: 2,
                total: 100,
                userList: [],
                addFormModal: false,
                updateFormModal: false,
                updateForm: {
                    id: 0,
                    email: '',
                    mobile: '',
                },
                addForm: {
                    username: '',
                    password: '',
                    email: '',
                    mobile: '',
                }
            }
        },
        created() {
            this.getUsers();
        },
        methods: {
            updateUser() {
                console.log(this.updateForm);
            },
            async updateUserHandler() {
                let info = await updateUser(this.updateForm);
                console.log(info);
                if (info.meta.status == 200) {
                    this.$message.success(info.meta.msg);
                    this.updateFormModal = false;
                    this.getUsers();
                } else {
                    this.$message.error(info.meta.msg);
                }
                this.updateForm = {
                    email: '',
                    mobile: '',
                }
            },
            async storeUser() {
                // 数据入库 自动验证
                console.log(this.addForm);
                let info = await addUser(this.addForm);
                console.log(info);
                // 接口是使用 http 状态码来标识信息的。
                if (info.meta.status == 201) {

                    this.$message.success(info.meta.msg);
                    this.addForm = {
                        username: '',
                        password: '',
                        email: '',
                        mobile: '',
                    }
                    this.getUsers();

                } else {
                    this.$message.error(info.meta.msg);
                }
                this.addFormModal = false;

            },
            addUser() {
                this.addFormModal = true;
            },
            async getUsers(query = '') {
                let info = await getUserList(query, this.currentPage, this.size);
                console.log(info);
                this.userList = info.data.users;
                this.total = info.data.total;

            },
            // 修改每页数量的时候触发
            handleSizeChange(size) {
                console.log('handleSizeChange', size);
                this.size = size;
                this.getUsers();

            },
            // 页码
            handleCurrentChange(page) {
                console.log('handleCurrentChange', page);
                this.currentPage = page;
                this.getUsers();


            },
            async handleEdit(scoped) {
                this.updateFormModal = true;
                // this.updateForm = scoped.row;
                this.updateForm = {
                    id: scoped.row.id,
                    email: scoped.row.email,
                    mobile: scoped.row.mobile,
                }
            },
            handleDelete(scoped) {
                console.log('del', scoped.row.id);

                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    // 点击确定
                    let info = await delUserById(scoped.row.id);
                    console.log(info);
                    if (info.meta.status == 200) {
                        this.$message({
                            type: 'success',
                            message: info.meta.msg
                        });
                        // 获取最新的用户列表
                        this.getUsers();

                    } else {
                        this.$message.error(info.meta.msg);
                    }

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            searchHandler() {
                let kw = this.keyword.trim();
                if (!kw) {
                    this.$message.error('请输入搜索关键字');
                    return;
                }
                // 调用接口进行搜索
                this.getUsers(kw);
                this.keyword = '';


            }


        }
    }
</script>

<style scoped lang="less">
    .breadcrumb {
        margin-bottom: 20px;
    }

    .seach {
        display: flex;
        margin-bottom: 20px;

        .kw {
            width: 400px;
            margin-right: 20px;
        }

        .btns {

        }
    }
</style>
